import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Image, Pagination } from 'antd';
import { getTopSongApi } from '@/api/recommend';
import { formatTimestamp } from '@/utils/dateFormat';
import musicAction from '@/store/action/music_action';
import style from './TopSong.module.css';

function TopSong({ getSongUrl }) {
  const [songData, setSongData] = useState({ song: [], allSong: [] });
  const [type, setType] = useState(0);
  const areaArr = [
    { area: '全部', type: 0 },
    { area: '华语', type: 7 },
    { area: '欧美', type: 96 },
    { area: '日本', type: 8 },
    { area: '韩国', type: 16 },
  ];
  // 获取最新音乐
  const getTopSong = async () => {
    const { data: songArr } = await getTopSongApi(type)
    setSongData({ song: songArr.slice(0,9), allSong: songArr })
  };
  useEffect(() => {
    getTopSong()
  }, [type]);
  // 改变最新音乐类型
  const changeType = (type) => {
    setType(type)
  };
  // 页码改变
  const paginationChange = (page) => {
    const start = (page - 1) * 9
    const end = start + 9
    setSongData({ ...songData, song: songData.allSong.slice(start,end) })
  };
  // 播放歌曲
  const playSong = (item) => {
    const songInfo = { songId: item.id, picUrl: item.album.picUrl, songName: item.name, artists: item.artists, duration: item.duration}
    getSongUrl(songInfo)
  }

  return (
    <>
      <section className={style.titleContainer}>
        <div className={style.title}>最新音乐</div>
        {
          areaArr.map(item => {
            const { type: _type, area } = item
            return (
              <span 
                key={_type} 
                className={`${style.area} ${_type === type ? style.activeColor : ''}`} 
                onClick={() => changeType(_type)}>
              {area}</span>
            )
          })
        }
      </section>
      <section className={style.songContainer}>
        {
          songData.song.map(item => {
            const { id, name, album: { picUrl }, artists, duration } = item
            return (
              <div key={id} className={style.song}>
                <Image className={style.antImg} src={picUrl} width={80} height={80} preview={false} />
                <div className={style.name}>
                  <div>{name}</div>
                  <div>
                    {artists.map((item,index) => <span key={index} className={style.nameArtist}>{item.name}</span>)}
                  </div>
                </div>
                {/* 歌曲时长 */}
                <div className={style.duration}>{formatTimestamp(duration, 'mm:ss')}</div>
                {/* 歌曲图标 */}
                <div className={style.icon}>
                  <span className='iconfont icon-bofang4' onClick={() => playSong(item)}></span>
                  <span className='iconfont icon-tianjia1'></span>
                  <span className='iconfont icon-xiazai'></span>
                  <span className='iconfont icon-gengduo'></span>
                </div>
              </div>
            )
          })
        }
      </section>
      <Pagination 
        className={style.pagination} 
        defaultCurrent={1} 
        showSizeChanger={false}
        total={songData.allSong.length} 
        onChange={paginationChange}
      />
    </>
  )
}

// 映射dispach(action)
const mapDispatchToProps = (dispatch) => {
  return {
    getSongUrl: (params) => dispatch(musicAction.getSongUrl(params)),
  }
}

export default connect(null, mapDispatchToProps)(TopSong)